<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from 'element-plus'

interface Form extends Record<string, any> {
  phone: string
}
const form = defineModel<Form>({ required: true })

const formRef = ref<FormInstance | null>(null)
const emits = defineEmits(['search', 'other-reset'])
const onSubmit = () => {
  emits('search', form)
}
const onReset = () => {
  formRef.value?.resetFields()
  emits('other-reset')
}
</script>

<template>
  <el-form :model="form" ref="formRef" inline>
    <el-form-item prop="phone" label="用户手机号:">
      <el-input v-model="form.phone" placeholder="请输入用户手机号" />
    </el-form-item>
    <slot name="other" />
    <slot name="select" />
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset" plain>重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>
